<template>
  <div id="user">
    <el-card class="box-card">
      <el-form
        size="mini"
        :inline="true"
        :model="serachForm"
        class="demo-form-inline"
      >
        <el-form-item label="关键字">
          <el-input
            clearable
            v-model="serachForm.keyword"
            placeholder="请输入用户名"
            style="width: 120px"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="serachForm.status" clearable style="width: 80px">
            <el-option :value="0" label="正常" />
            <el-option :value="1" label="禁用" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否删除">
          <el-select v-model="serachForm.deleted" style="width: 90px">
            <el-option :value="false" label="正常" />
            <el-option :value="true" label="已删除" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              v-model="serachForm.beginDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择时间"
              value-format="yyyy-MM-dd"
              v-model="serachForm.endDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-lollipop"
            @click="handleSubmit"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="handleSave"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="id" label="编号" width="50">
            </el-table-column>
            <el-table-column prop="avatar" label="头像" width="60">
              <template slot-scope="scope">
                <el-avatar
                  :size="50"
                  :src="scope.row.avatar ? scope.row.avatar : defaultAvatar"
                ></el-avatar>
              </template>
            </el-table-column>

            <el-table-column prop="username" label="用户名" width="80" />
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="gender" label="性别" width="80">
              <template v-slot="scope">
                <el-tag
                  effect="dark"
                  disable-transitions
                  :type="scope.row.gender | genderTypeFilter"
                >
                  {{ scope.row.gender | genderFilter }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="signture" label="签名" />
            <el-table-column prop="status" label="状态" width="80">
              <template v-slot="scope">
                <!-- <el-tag
                  effect="plain"
                  disable-transitions
                  :type="scope.row.status == 0 ? 'success' : 'warning'"
                >
                  {{ scope.row.status == 0 ? "正常" : "禁用" }}
                </el-tag> -->
                <el-switch
                  v-model="scope.row.status"
                  :active-value="0"
                  :inactive-value="1"
                  @change="handleStatusChange(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="deleted" label="是否删除" width="100">
              <template v-slot="scope">
                <el-tag
                  effect="plain"
                  disable-transitions
                  :type="scope.row.deleted ? 'danger' : 'success'"
                >
                  {{ scope.row.deleted ? "删除" : "正常" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="ctime" label="注册时间" />
            <el-table-column width="180" fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  :type="scope.row.deleted ? 'success' : 'danger'"
                  :icon="scope.row.deleted ? 'el-icon-rank' : 'el-icon-delete'"
                  @click="
                    handleLogicDelete(
                      scope.row.id,
                      !scope.row.deleted,
                      scope.row.username
                    )
                  "
                  >{{ scope.row.deleted ? "恢复" : "删除" }}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="serachForm.currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="serachForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="40%"
    >
      <el-form
        :model="editForm"
        :rules="rules"
        status-icon
        ref="editForm"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="editForm.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="editForm.gender">
            <el-radio :label="0">保密</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个性签名" prop="signture">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="editForm.signture"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="0"
            :inactive-value="1"
            v-model="editForm.status"
          />
        </el-form-item>
        <el-form-item label="是否删除" prop="deleted">
          <el-switch v-model="editForm.deleted" />
        </el-form-item>
        <el-form-item label="注册时间" prop="ctime">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            v-model="editForm.ctime"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  
  <script>
import {
  userList,
  saveOrUpdate,
  deleteById,
  changeStatus,
} from "@/api/business/user";
export default {
  name: "user",
  data() {
    return {
      dialogTitle: "",
      dialogFormVisible: false,
      editForm: {},
      serachForm: {
        keyword: "",
        status: undefined,
        deleted: false,
        beginDate: "",
        endDate: "",
        currentPage: 1,
        pageSize: 3,
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" },
        ],
        age: [
          { required: true, message: "年龄不能为空！", trigger: "blur" },
          { type: "number", message: "请输入数字！" },
        ],
        salary: [{ required: true, message: "请输入薪资", trigger: "blur" }],
      },
      tableData: [],
      total: 0,
      defaultAvatar:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 3 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
    handleSubmit() {
      this.serachForm.currentPage = 1;
      this.fetchData(this.serachForm);
    },
    handleEditForm() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          saveOrUpdate(this.editForm).then((res) => {
            this.fetchData(this.serachForm);
            this.$message.success("操作成功！");
            this.dialogFormVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(pageSize) {
      this.serachForm.pageSize = pageSize;
      this.fetchData(this.serachForm);
    },
    handleCurrentChange(currentPage) {
      this.serachForm.currentPage = currentPage;
      this.fetchData(this.serachForm);
    },
    handleEdit(data) {
      this.dialogFormVisible = true;
      this.dialogTitle = "编辑用户";
      this.editForm = data;
    },
    handleSave() {
      this.dialogTitle = "新增用户";
      console.log(this);
      this.resetForm("editForm");
      this.dialogFormVisible = true;
      this.editForm = {};
    },
    fetchData(params) {
      userList(params).then((res) => {
        const { data } = res;
        this.serachForm.currentPage = data.currentPage;
        this.serachForm.pageSize = data.pageSize;
        this.tableData = data.data;
        this.total = data.totalCount;
      });
    },
    handleLogicDelete(id, deleted, username) {
      const logicDeleteTip = !deleted ? "恢复" : "删除";
      const type = !deleted ? "" : "warning";
      this.$confirm(`是否要${logicDeleteTip}[${username}]这个用户?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type,
        center: true,
      })
        .then(() => {
          deleteById({ id, deleted }).then((res) => {
            this.$message({
              type: "success",
              message: `${logicDeleteTip}成功!`,
            });
            if (!deleted) {
              this.serachForm.deleted = false;
            }
            this.fetchData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${logicDeleteTip}`,
          });
        });
    },
    handleStatusChange(row) {
      let statusTip = row.status === 0 ? "启用" : "禁用";
      this.$confirm(
        `是否修改用户[${row.nickname}]的状态为[${statusTip}]?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          changeStatus({ id: row.id, status: row.status }).then((res) => {
            this.$message({
              type: "success",
              message: "状态修改成功!",
            });
          });
        })
        .catch(() => {
          row.status = row.status === 0 ? 1 : 0;
        });
    },
  },
  filters: {
    genderFilter(gender) {
      return gender === 1 ? "男" : gender === 2 ? "女" : "保密";
    },
    genderTypeFilter(type) {
      return type === 0 ? "warning" : type === 1 ? "" : "danger";
    },
  },
  created() {
    this.fetchData();
  },
};
</script>
  
  <style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-col {
  text-align: center;
}

.el-pagination {
  text-align: right;
}
</style>